<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../ThirdParty/requirejs-2.1.20/require.min.js"></script>
    <script type="text/javascript">
        require.config({
            baseUrl: '../Source',
            waitSeconds: 60
        });
    </script>
</head>
<body>
<style>
    @import url(../Apps/Sandcastle/templates/bucket.css);

    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }

    #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    #toolbar .header {
        font-weight: bold;
    }
</style>
<button id="heatmap" style="position: absolute;left: 2px;top: 2px;z-index: 100">热力图</button>
<div id="cesiumContainer" class="fullSize"></div>
<!--<div id="loadingOverlay"><h1>Loading...</h1></div>-->
<div id="toolbar">
</div>
<script id="cesium_sandcastle_script">
    var viewer;
    function startup(Cesium) {
        'use strict';
//Sandcastle_Begin
        viewer = new Cesium.Viewer('cesiumContainer', {
            infoBox: false,
            selectionIndicator: false,
            timeline: false,
            animation: false,
            scene3DOnly: true,
            geocoder: false,
            homeButton: false,
            sceneModePicker: false,
            navigationHelpButton: false,
            imageryProvider : Cesium.createTileMapServiceImageryProvider({
                url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
            }),
            baseLayerPicker : false,
        });
        let boundingBox = {
            north: 43,
            south: 3,
            east: 120,
            west: 90
        };

        let points = [];
        for (let i=0;i<1000;i++){
            let x = 90 + Math.random()*30;
            let y = 3 + Math.random()*43;
            let value = Math.random()*100;
            viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(x, y),
                point:{
                    pixelSize : 1,
                    color : Cesium.Color.YELLOW
                }
            });
            points.push({x:x,y:y,value:3});
        }

        let flag = false;
        let hm;
        document.getElementById('heatmap').onclick = function(){
            flag = !flag;
            if(flag){
                hm = new Cesium.HeatMap({
                    scene: viewer.scene,
                    bbox: boundingBox
                });
                hm.setWGS84Data(0, 10, points);
            }else{
                hm.destory();
                hm = null;
            }
        }


//Sandcastle_End
//        Sandcastle.finishedLoading();
    }
    if (typeof Cesium !== "undefined") {
        startup(Cesium);
    } else if (typeof require === "function") {
        require(["Cesium"], startup);
    }
</script>
</body>
</html>
